<template>
  <div>
    <el-upload
      class="upload-demo"
      action=""
      drag
      ref="form"
      :file-list="fileList"
      :auto-upload="false"
      :on-change="onChange"
      :show-file-list="false"
      :accept="this.getAcceptDataType()"
      :multiple="false"
    >
      <div v-if="fileList.length == 0">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          选择或拖放数据文件
          <div>支持上传{{ this.getAcceptDataType().replace(/,/g, '、') }}</div>
        </div>
      </div>
      <div v-else class="file">
        <i class="el-icon-document"></i>
        <div>{{ this.formData.file.name }}</div>
        <div>{{ this.formData.file.size }}KB</div>
      </div>
    </el-upload>
    <div class="text-left margin-bottom-10">
      <el-button @click="downloadFile" plain size="mini" icon="el-icon-download"
        >下载模板</el-button
      >
    </div>
    <el-form
      :model="formData"
      :rules="rules"
      ref="materialForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="数据集名称" prop="fileName">
        <el-input
          v-model.trim="formData.fileName"
          placeholder="请输入数据集名称"
          showMaxLimit
          :maxlength="50"
          clearable
        ></el-input>
      </el-form-item>

      <el-form-item label="数据集描述" prop="fileDesc">
        <el-input
          v-model.trim="formData.fileDesc"
          placeholder="请输入数据集描述"
          showMaxLimit
          :maxlength="50"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label-width="0px">
        <el-button type="primary" @click="onSubmit">导入</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import request from '@/modules/index/utils/request';
import { downloadFile } from '@/utils/common';
export default {
  name: 'newDataList',
  props: {
    callBack: [Object, Function],
    dataType: {
      type: String,
      default: 'data_predict',
    },
  },
  data() {
    return {
      fileList: [],
      formData: {
        fileName: '',
        fileDesc: '',
        file: '',
      },
      rules: {
        fileName: [
          { required: true, message: '数据集名称不能为空', trigger: 'blur' },
        ],
        fileDesc: [
          { required: true, message: '数据集描述不能为空', trigger: 'blur' },
        ],
      },
    };
  },
  methods: {
    onSubmit() {
      let _this = this;
      this.$refs.materialForm.validate((valid, object) => {
        if (!_this.formData.file) {
          this.$message({
            showClose: false,
            message: '文件未上传!',
            type: 'error',
          });
          return false;
        }
        if (valid) {
          if (_this.callBack) {
            _this.callBack(this.formData);
          }
        } else {
          return false;
        }
      });
    },
    onChange(files, fileList) {
      this.formData.file = files;
      this.fileList = [files];
    },
    downloadFile() {
      request({
        url: '/material-info/getUrl', //接口
        method: 'post',
        params: { projectType: this.dataType },
        responseType: 'blob',
      }).then((response) => {
        if (!response.data) {
          this.$message.error('下载文件失败');
          return;
        }
        downloadFile(response);
      });
    },
    getAcceptDataType: function () {
      let result = '.txt,.csv,.xls,.xlsx,.zip';
      const dataType = this.dataType;
      if (
        ['img_classify', 'voice_classify', 'img_detection'].includes(dataType)
      ) {
        result = '.zip';
      } else if (
        ['data_predict', 'txt_classify', 'data_unsupervised'].includes(dataType)
      ) {
        result = '.txt,.csv,.xls,.xlsx,';
      }
      return result;
    },
  },
};
</script>
<style lang="less" scoped>
@import '~@/style/variables.less';

.file {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  i {
    color: @--color-primary;
    font-size: 50px;
  }
  div {
    font-size: 14px;
    line-height: 18px;
    color: #000;
  }
}
</style>
